<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue'
	import { getAllArticlesBytnId, getArticlesClassPage } from '@/api/article.js';

	const props = defineProps({
		artModule: {
			type: [Number, String],
			default: 0
		},
		title: {
			type: String,
			default: ""
		}
	})
	
	const tenantId = ref('')
	
	onMounted(() => {
		tenantId.value = uni.getStorageSync('tenantId')
		getVideoArticle()
	})

	const size = ref(4)
	const current = ref(1)
	const totalData = ref(0)
	const changePage = (e) => {
		console.log('changePage',e)
		current.value = e.current
		getVideoArticle()
	}
	const videoArticleList = ref([])
	const getVideoArticle = () => {
		let item = {
			tenantId: tenantId.value,
			artModule: props.artModule,
			size: size.value,
			current: current.value,
			ascs:'artIndex'
		}
		getArticlesClassPage(item).then((res) => {
			if (res.data.success) { videoArticleList.value = [...res.data.data.records]; totalData.value = res.data.data.total }
		})

	}

	const toArticle = (id, title) => {
		uni.navigateTo({
			url: `/pages/index/article/article?id=${id}`,
		})
	}

	const back = () => {
	
		uni.navigateBack()
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
	<articleTable ref="timer"></articleTable>
	<img :src="'@/../static/img/bgIcon/article.svg'"
		style="opacity: 0.3;width: 45%;position: absolute;top: 50%;right: -3%;" />
	<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" @clickLeft="back"
		customLeft :title="props.title" class="absolute" style="height: 3vh;">
	</Navigator>

	<view @touchend="handleEnd" class="wh100p flex column-center"
		style="background: linear-gradient(90deg, #0078BB 0%, #003E94 100%);padding: 1% 4%; box-sizing: border-box;">
		<view class="videoArticle-box w100p">
			<view class="relative" style="height: 94%;">
				<view class="wh100p flex column-center" v-if="videoArticleList.length<1">
					<gui-empty style="margin:auto">
						<template v-slot:img>
							<view class="gui-flex gui-rows gui-justify-content-center">
								<text class="gui-icons gui-empty-icon  font64 " style="color:white">&#xe644;</text>
							</view>
						</template>
						<template v-slot:text>
							<text class=" gui-block gui-text-center gui-margin-top  font32"
								style="color:white">暂无数据</text>
						</template>
					</gui-empty>
				</view>

				<view class="videoArticle-item" v-for="(item,index) in videoArticleList" :key="index"
					@click="toArticle(item.id,item.name)">
					<view class="videoArticle-title w100p flex-between column-center">
						<text>{{item.name}}</text>
						<text style="color: #348BFD;font-size: 28px;">阅读原文</text>
					</view>
					<text class="videoArticle-author">发布时间：{{item.createTime}}</text>
					<text class="videoArticle-dec">{{item.artDesc}}</text>
				</view>
			</view>
			<view class="custom flex-center " style="height: 6%;color: white;align-items: flex-end;">
				<uni-pagination :total="totalData" prev-text="上一页" next-text="下一页" :pageSize="size" @change="changePage"
					:current="current" />
			</view>
		</view>
	</view>
</template>

<style>
	.videoArticle-box {

		height: 85%;
		padding: 2% 3%;

		border-radius: 12px;
		background: rgba(0, 0, 0, 0.20);
	}

	.videoArticle-item {
		display: flex;
		/* padding: 24px 0px; */
		box-sizing: border-box;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 8px;
		align-self: stretch;
		border-bottom: 1px solid rgba(255, 255, 255, 0.50);
		height: 24%;

	}

	.videoArticle-title {
		color: #F6FBFF;
		font-family: PingFang SC;
		font-size: 36px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}

	.videoArticle-author {
		color: #80C0FF;
		font-family: PingFang SC;
		font-size: 28px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 0.5%;
	}

	.videoArticle-dec {
		color: #F6FBFF;
		width: 95%;
		font-family: PingFang SC;
		font-size: 28px;
		font-style: normal;
		font-weight: 400;
		line-height: 38px;
		margin-top: 0.5%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 171.429% */
	}

	* {
		box-sizing: border-box;
	}

	/deep/.custom .uni-pagination__num-tag {
		margin: 0 8px;
		font-size: 18px;
		padding: 0 10px;
	}

	/deep/.custom .uni-pagination__total {
		font-size: 18px;
		color: white;
		margin-right: 20px;
	}

	/deep/.custom .uni-pagination__child-btn {
		font-size: 18px;

	}
</style>